<template>
  <div class="container">
    <el-tree :data="data" default-expand-all :props="{ label: 'name' }" :highlight-current="true">
      <!-- 传结构进去 ,使用插槽 -->
      <template #default="obj">
        <!-- 希望拿到这一行原本的数据,作用域插槽 -->
        <!-- obj.data 拿到当前行数据 -->
        <!-- <span>🤭-{{ obj.data.name }}</span> -->

        <!-- 用Layout布局 -->
        <el-row style="width: 100%;">
          <el-col :span="20">{{ obj.data.name }}</el-col>
          <el-col :span="4">
            <el-row>
              <el-col :span="12">{{ obj.data.managerName }}</el-col>
              <el-col :span="12">
                <!-- 下拉菜单 el-dropdown -->

                <!-- 指令事件command是所有选项被点击时会冒泡上来的一个事件 -->
                <!-- $event 事件本身原来的参数 -->
                <el-dropdown @command="handleCommand($event, obj.data.id)">
                  <!-- 常驻结构 -->
                  <span>操作</span>
                  <i class="el-icon-arrow-down" />
                  <!-- 弹出结构 -->
                  <template #dropdown>
                    <el-dropdown-menu>
                      <!-- <el-dropdown-item @click.native="add">添加子部门</el-dropdown-item> -->
                      <el-dropdown-item command="add">添加子部门</el-dropdown-item>
                      <el-dropdown-item command="edit">编辑</el-dropdown-item>
                      <el-dropdown-item command="del">删除</el-dropdown-item>
                    </el-dropdown-menu>

                  </template>

                </el-dropdown>

              </el-col>
            </el-row>
          </el-col>
        </el-row>

      </template>
    </el-tree>
    <!-- 点击添加子部门跳出来的弹窗 -->
    <!-- <el-dialog title="添加子部门" width="500px" :visible="show" :before-close="close">
        内容
      </el-dialog> -->

    <!-- 把组件抽出去 , 但是子组件使用到了父组件的数据 , 所以需要进行父子传递数据,最后可以优化成 .snyc -->
    <!-- <AddDept :show-dialog="show" @suibian="show=$event" /> -->
    <!-- <AddDept :show-dialog="show" @update:showDialog="show=$event" /> -->
    <AddDept :show-dialog.sync="show" :current-id="currentId" @refresh="getDepartment" />
  </div>
</template>

<script>
import { getDepartment } from '@/api/department'
import { transformListToTree } from '@/utils'
import AddDept from './components/add-dept.vue'
export default {
  components: {
    AddDept
  },
  data() {
    return {
      // data: [{
      //   name: '一级 1',
      //   children: [{
      //     name: '二级 1-1',
      //     children: [{
      //       name: '三级 1-1-1'
      //     }]
      //   }]
      // }, {
      //   name: '一级 2',
      //   children: [{
      //     name: '二级 2-1',
      //     children: [{
      //       name: '三级 2-1-1'
      //     }]
      //   }, {
      //     name: '二级 2-2',
      //     children: [{
      //       name: '三级 2-2-1'
      //     }]
      //   }]
      // }, {
      //   name: '一级 3',
      //   children: [{
      //     name: '二级 3-1',
      //     children: [{
      //       name: '三级 3-1-1'
      //     }]
      //   }, {
      //     name: '二级 3-2',
      //     children: [{
      //       name: '三级 3-2-1'
      //     }]
      //   }]
      // }]
      show: false,
      data: [],
      currentId: null // 当前操作部门的id
    }
  },
  created() {
    this.getDepartment()
  },
  methods: {
    handleCommand(type, id) {
      // console.log(222, type, id)
      if (type === 'add') {
        this.currentId = id // 当前操作部门的id要存下来 给添加部门用
        // ...
        this.show = true
      }
      if (type === 'edit') {
        // ...
      }
      if (type === 'del') {
        // ...
      }
    },

    add() {
      console.log(111)
      this.show = true
    },
    async getDepartment() {
      const result = await getDepartment()
      // this.data = result
      this.data = transformListToTree(result, 0) // 传智教育的id 1
    }
    // transformListToTree(data, id) {
    //   const res = []
    //   data.forEach((item) => {
    //     if (item.pid === id) {
    //       // 递归  ,里面有子部门,就递归
    //       const temp = this.transformListToTree(data, item.id)
    //       if (temp.length > 0) {
    //         item.children = temp
    //       }
    //       res.push(item)
    //     }
    //   })
    //   return res
    // }

  }
}
</script>
